<div id="app-album">
  <mat-card>
    <div class="album-head">
      <img [src]="storage | imgHover" add-img-control="0.8" #headerImg />
      <div class="album-head-intro">
        <mat-accordion #accordion>
          <mat-expansion-panel>
            <mat-expansion-panel-header>
              <mat-panel-title>
                详细信息
              </mat-panel-title>
            </mat-expansion-panel-header>
            <ng-container #panelContainer></ng-container>
          </mat-expansion-panel>
        </mat-accordion>
        <div class="row-show">
          <ng-container #rowContainer></ng-container>
        </div>
      </div>
    </div>
  </mat-card>
  <app-album-list [content]="storage.content" [storage]="storage">
  </app-album-list>

  <mat-card class="tool-card">
    <button
      mat-raised-button
      [color]="theme"
      [disabled]="allStorage.prev === null"
      (click)="goToNewAlbum(allStorage.prev)"
    >
      上个相册
    </button>
    <button mat-raised-button [color]="theme" [routerLink]="['/']">
      回到首页
    </button>
    <button
      mat-raised-button
      [color]="theme"
      [disabled]="allStorage.next === null"
      (click)="goToNewAlbum(allStorage.next)"
    >
      下个相册
    </button>
  </mat-card>
</div>

<ng-template #infoListTemplate>
  <mat-list>
    <mat-list-item>
      <mat-icon mat-list-icon>adjust</mat-icon>
      <h4>{{ name }}</h4>
    </mat-list-item>
    <mat-list-item>
      <mat-icon mat-list-icon>access_time</mat-icon>
      <h4>{{ storage.config.date | date: "yyyy 年 MM 月 dd 日" }}</h4>
    </mat-list-item>
    <mat-list-item>
      <mat-icon mat-list-icon>place</mat-icon>
      <h4>{{ storage.config.position || "未注明地点" }}</h4>
    </mat-list-item>
    <mat-list-item>
      <mat-icon mat-list-icon>content_paste</mat-icon>
      <h4>{{ storage.config.desc || "暂无相册说明" }}</h4>
    </mat-list-item>
    <mat-list-item>
      <mat-icon mat-list-icon>filter</mat-icon>
      <h4>共计 {{ storage.content.length }} 张图片</h4>
    </mat-list-item>
  </mat-list></ng-template
>
